import React from 'react'
import { Upload, Icon, message, List, Row, Col, Button, Modal, Table, Tabs, Divider } from 'antd'

import CustomizeForm from './CustomizeForm'

import './style.css'
import PineChart from './Charts/PineChart';

import HomeApi from '../../store/api/home'

import { DeepCopy } from '../../utils/utils'
import ComparePanel from './Cpmts/ComparePanel';

import _HomeApi from '../../store/api/home'

import version from '../../version'

const Dragger = Upload.Dragger;




const { TabPane } = Tabs;

const overallcolumns = function(scope) {
  return [
    {
      title: '包名',
      dataIndex: 'package_name',
      key: 'packageName',
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '启动封面',
      dataIndex: 'cover_url',
      key: 'flushPng',
      render: function (text, record, index) {
        {
          let url =version.api_url + text.replace('public/', '/');
          return <img src={url} width={100} height={100}></img>
        }
      }
    },
    {
      title: '内容载入地址',
      dataIndex: 'content_url',
      key: 'contentUrl',
    },
    {
      title: '操作',
      key: 'opt',
      width: 300,
      render: function (text, record, index) {
        let self = scope;
        return <React.Fragment>
          {
            record.status == 1 ?
              <label style={{ color: 'red' }}>正在生成中...</label>
              : <span>
                <a onClick={()=>{self.generateAPK(record.id)}}>生成</a>
                <Divider type="vertical" />
                <a>删除</a>
                <Divider type="vertical" />
                {
                  (record.status == 0 ? <span>
                    <a style={{ color: 'red' }}>待处理</a>
                  </span> : <a href={version.api_url + '/apk/'+record.package_name+'-'+record.version+'.apk'}>下载</a>)
                }
              </span>
  
          }
  
        </React.Fragment>
      }
    }
  ]
} 

class Home extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      showCustomizeUI: false,
      apkList: []
    }

    this.currentItem = {};
  }

  componentDidMount() {
    this.loadApkListByTime(0);

  }

  loadApkListByTime(t) {
    let self = this;
    let st = setTimeout(function () {
      clearTimeout(st);
      self.loadApkList();
      self.loadApkListByTime(30 * 1000);
    }, t)
  }

  loadApkList() {
    let self = this;
    _HomeApi.getApkList().then(function (resp) {
      console.log(resp)
      if (resp.code == 200) {
        let data = resp.message;
        self.setState({
          apkList: data
        })
      }
    })
  }

  generateAPK(apkId) {
    let self = this;
    _HomeApi.generateAPK(apkId).then(function (resp) {
      if (resp.code == 200) {
        self.loadApkList();
      }
    })
  }



  onCustomize() {
    this.state.showCustomizeUI = true;
    this.setState(Object.assign({}, this.state))
  }

  onSubmitCompleted(data) {
    let self = this;
    _HomeApi.createApk(data).then(function (resp) {
      if (resp.code == 200) {
        self.setState({
          showCustomizeUI: false
        })
        self.loadApkList();
      }
    })
  }

  render() {
    let self = this;
    let { showCustomizeUI, apkList } = this.state;
    return <React.Fragment>
      <p>我要<a href="javascript::void()" onClick={() => {
        self.onCustomize()
      }}>定制</a>一个基于H5的Android版APP</p>
      <Table dataSource={apkList} columns={overallcolumns(self)} rowKey="id" />
      {
        showCustomizeUI ? <Modal
          visible={true}
          footer={null}
          mask={true}
          centered={true}
          bodyStyle={styles.bg}
          onCancel={() => { self.setState({ showCustomizeUI: false }) }}
        >
          <CustomizeForm onSubmitCompleted={(data) => { self.onSubmitCompleted(data) }}></CustomizeForm>
        </Modal> : null
      }
    </React.Fragment>
  }
}

const styles = {
  bg: {
    paddingTop: '50px'
  }
}

export default Home